<template>
	<view class="my-skeleton tn-skeleton" v-show="showSkeleton">
		<view class="list">
		<view v-for="(item,index) in list" :key="index" class="list-item tn-skeleton-fillet">
			
		</view>
		</view>
		<tn-skeleton :show="showSkeleton"></tn-skeleton>
	</view>
</template>

<script>
	export default{
		name:'my-common-skeleton',
		props:{
			showSkeleton:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				list:[]
			}
		},
		created() {
			this.list = new Array(6)
		}
	}
</script>

<style lang="scss" scoped>
	.my-skeleton{
		z-index: 9999;
		position: fixed;
		height: 100vh;
		width: 100%;
		left: 0;
		top:0;
		padding:200rpx 30rpx 0;
		
		.list{
			.list-item{
				height: 72rpx;
				margin-bottom: 36rpx;
			}
			.list-item:first-child{
				width: 80%;
				margin-left: 20%;
			}
			.list-item:last-child{
				width: 80%;
			}
		}
		
	}
</style>